<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <template #header>
            <div class="card-header">
                <span>角色管理</span>
            </div>
        </template>
        <div class="input-btns">
            <el-button type="primary">添加新角色</el-button>
        </div>
        <el-table :data="roles" size="default" :border="true" stripe v-loading="isShowLoading">
            <template #empty>
                <el-empty description="暂无数据" />
            </template>
            <el-table-column type="expand" label="明细" width="60" align="center" #="{ row }">
                <el-empty v-if="!row.children || row.children.length == 0" :image-size="40" description="未分配权限"></el-empty>
                <!-- 参考代码 -->
                <RolesTreeList class="role-box" :list="row.children" caret #default="itemB">
                    <RolesTreeList :list="itemB.list" type="success" caret #default="itemC">
                        <RolesTreeList :list="itemC.list" type="warning"></RolesTreeList>
                    </RolesTreeList>
                </RolesTreeList>
            </el-table-column>
            <el-table-column type="index" label="序号" width="60" align="center" />
            <el-table-column label="角色名称" prop="roleName"></el-table-column>
            <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
            <el-table-column label="操作" width="280px">
                <el-button type='primary' size='small' @click="isShowEdit = true">
                    <el-icon>
                        <EditPen></EditPen>
                    </el-icon>
                    编辑
                </el-button>
                <el-popconfirm title='确定删除用户吗?'>
                    <template #reference>
                        <div class="tip">
                            <el-button type='danger' size='small'>
                                <el-icon>
                                    <Delete></Delete>
                                </el-icon>
                                删除
                            </el-button>
                        </div>
                    </template>
                </el-popconfirm>
                <el-button type='warning' size='small' @click="isShowRole = true">
                    <el-icon>
                        <Setting></Setting>
                    </el-icon>
                    分配权限
                </el-button>
            </el-table-column>
        </el-table>
    </el-card>
</template>

<script setup>
import RolesTreeList from "@/components/RolesTreeList.vue";
import { ref } from 'vue';
import { printLog } from "@/util";
import rolesApi from "@/api/roles.js";

let roles = ref([])
let isShowLoading = ref(false)
const initRolesList = async function () {
    try {
        isShowLoading.value = true;
        let roleList = await rolesApi.loadRoles()
        roles.value = roleList;
    } catch (error) {
        printLog(error)
    } finally {
        isShowLoading.value = false;
    }
}
initRolesList()
</script>

<style lang="scss" scoped>
.input-btns {
    margin-bottom: 20px;

    .el-input {
        display: inline-flex;
        width: 400px;
        margin-right: 20px;
    }
}

.el-card {
    display: flex;
    flex-flow: column;
    :deep(.el-card__body) {
        box-sizing: border-box;
        display: flex;
        flex-flow: column nowrap;
        height: 100%;
        overflow: hidden;
    }
}

.el-pagination {
    justify-content: center;
    margin-top: 20px;
}

.tip {
    display: inline-block;
    margin: 0px 12px;
}
</style>